<?php
/**
 * 3D视频
 *
 * @package custom
 *
 */
?>

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php');?>

<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('resources/pics/style.css?'.date('YmdHi')); ?>" />
<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('resources/pics/bootstrap.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('resources/pics/zxf_page.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('resources/3dvideo/style.css'); ?>" />
<!--[if lt IE 9]>
<script src="//cdnjscn.b0.upaiyun.com/libs/html5shiv/r29/html5.min.js"></script>
<script src="//cdnjscn.b0.upaiyun.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('resources/pics/js/zxf_page.js'); ?>"></script>


<div class="owl-stage-outer">
    <!--<div class="owl-stage" style="transform: translate3d(-1125px, 0px, 0px); transition: all 0s ease 0s; width: 3938px;">-->
    <div class="owl-stage" style="transition: all 0s ease 0s; width: 3938px;">
        <div class="owl-item cloned" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">The
                                Mummy</a></h4><span class="released">9 Jun 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></div>
                        <span>5.5 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item cloned" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">The
                                Parrot</a></h4><span class="released">20 Jan 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></div>
                        <span>5.2 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item cloned" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">Star
                                Wars</a></h4><span class="released">14 Dec 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></div>
                        <span>7.5 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item cloned" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">The
                                Brain</a></h4><span class="released">20 Dec 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></div>
                        <span>7.2 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item active" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">Star
                                Wars</a></h4><span class="released">14 Dec 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></div>
                        <span>7.5 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item active" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">The
                                Brain</a></h4><span class="released">20 Dec 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></div>
                        <span>7.2 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item active" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">The
                                Mummy</a></h4><span class="released">9 Jun 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></div>
                        <span>5.5 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item active" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">The
                                Parrot</a></h4><span class="released">20 Jan 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></div>
                        <span>5.2 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">Star
                                Wars</a></h4><span class="released">14 Dec 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></div>
                        <span>7.5 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">The
                                Brain</a></h4><span class="released">20 Dec 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></div>
                        <span>7.2 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item cloned" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">Star
                                Wars</a></h4><span class="released">14 Dec 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></div>
                        <span>7.5 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item cloned" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">The
                                Brain</a></h4><span class="released">20 Dec 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></div>
                        <span>7.2 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item cloned" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">The
                                Mummy</a></h4><span class="released">9 Jun 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></div>
                        <span>5.5 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
        <div class="owl-item cloned" style="width: 266.25px; margin-right: 15px;">
            <div class="item"><!-- Start of Movie Box -->
                <div class="movie-box-1"><!-- Start of Poster -->
                    <div class="poster"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg" alt=""></div><!-- End of Poster --><!-- Start of Buttons -->
                    <div class="buttons"><a href="https://www.youtube.com/watch?v=Q0CbN8sfihY" class="play-video"><i class="fa fa-play"></i></a></div>
                    <!-- End of Buttons --><!-- Start of Movie Details -->
                    <div class="movie-details"><h4 class="movie-title"><a href="http://v.bootstrapmb.com/2018/4/jgdw6534/movie-detail.html">The
                                Parrot</a></h4><span class="released">20 Jan 2017</span></div>
                    <!-- End of Movie Details --><!-- Start of Rating -->
                    <div class="stars">
                        <div class="rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></div>
                        <span>5.2 / 10</span></div><!-- End of Rating --></div><!-- End of Movie Box -->
            </div>
        </div>
    </div>
</div>












<div class="content">
    <div id="masonry" class="post row" style="top:10px;">
        <?php
        //$this->archiveTitle();
        $imgs = getContentImg($this->cid);
        foreach ($imgs as $img) {
            //加style="display:none;"是因为用js做分页
            echo "<div style=\"display:none;\" class=\"post-item col-xs-6 col-sm-4 col-md-3\" data-src=\"$img[1]\"><img src=\"$img[1]\" title=\"$img[0]\" class=\"post-item-img\"></div>";
        }
        ?>
    </div>
    <!--<div class="post-info-box"/>-->
    <!--<div class="post-info">
        <div class="post-info-box"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span><span class="post-info-title anti-select">标题：</span><span class="post-info-text"><?php /*echo $this->title */?></span></div>
        <div class="post-info-box"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span><span class="post-info-title anti-select">拍摄/来源：</span><span class="post-info-text"><?php /*echo $this->fields->photog != "" ? ($this->fields->srcurl != "" ? '<a href="'.$this->fields->srcurl.'" target="_blank">'.$this->fields->photog.'</a>' : $this->fields->photog) : '未填写' */?></span></div>
        <div class="post-info-box"><span class="glyphicon glyphicon-user" aria-hidden="true"></span><span class="post-info-title anti-select">出镜：</span><span class="post-info-text"><?php /*echo $this->fields->appear != "" ? $this->fields->appear : '未知' */?></span></div>
        <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="post-info-title anti-select">描述：</span><span class="post-info-text"><?php /*echo $this->fields->description != "" ? $this->fields->description : ($this->options->picdesc ? $this->options->picdesc : '未填写') */?></span>
    </div>-->
</div>
<div class="zxf_pagediv"></div>
<script type="text/javascript">
    /*
     * js实现分页，适用于数据div被外层div包含的情况
     * <div id="masonry">
     *     <div src="data"/>
     *     <div src="data"/>
     *     <div src="data"/>
     *     ...
     * </div>
     */
    var len = 12;//定义每页长度
    var $wrapper = $("div#" + "masonry");


    /*
     * 业务逻辑
     */
    var all = $wrapper.find("div").length;
    var cnt = Math.ceil(all / len);
    var pre = 1;//记录之前的页数
    //
    function show(page,len,attr) {
        var start = (page-1) * len;
        var end = start + len;
        for (var i = start ; i < end;i++)
            $wrapper.find("div:eq(" + i + ")").attr("style","display:"+attr+";");
    }
    //show(1,all,'none');//关闭所有div显示，性能更好一点应该是服务器端在每个div上加display:none
    show(1,len,'block');//显示第一页
    //翻页
    $(".zxf_pagediv").createPage({
        pageNum: cnt,
        current: 1,
        backfun: function(e) {
            if (e.current < 1 || e.current > cnt){
                alert('当前页数不存在，回到首页！');
                e.current = 1;
            }
            show(pre,len,'none');//隐藏上一页
            show(e.current,len,'block');//显示当前页
            pre = e.current;//记录当前页
        }
    });
</script>



<?php $this->need('footer.php'); ?>
